<template>
  <div class="fullMain">
    <x-header
      class="custumHeader"
      :left-options="{backText: '',showBack: false}">
      <!-- <a slot="left">
         <i slot="overwrite-left" class="lIcon">X</i>
       </a>-->
      <span>实验室项目管理</span>
      <!-- <a slot="right">
         <x-icon slot="overwrite-right" type="ios-more" size="35" style="position:relative;top:-8px;left:-3px;"></x-icon>
       </a>-->
    </x-header>
    <div class="mainbBg">
      <div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon"></i>
        <span class="ids">
          姓名：老板
          <i class="fa fa-weixin icons"></i>
        </span>
      </div>
      <div class="tableDiv">
        <group class="allprojectP">
          <x-input title="项目名称"  placeholder="请输入项目名称" v-model="pName"></x-input>
        </group>
        <group class="allprojectP">
          <x-input title="项目类别"  placeholder="请输入项目类别" v-model="pLb"></x-input>
        </group>
        <group class="allprojectP">
          <x-input title="项目负责人"  placeholder="请输入项目负责人" v-model="pFzr"></x-input>
        </group>
        <group class="allprojectP">
          <button type="button"  class="hsButton" style="position: absolute;right: 120px;top: 3px;">查看项目计划</button>
          <datetime
            v-model="startTime"
            @on-change="change"
            :title="startLabel"
            @on-cancel="log('cancel')"
            @on-confirm="onConfirm"
            @on-hide="log('hide', $event)"></datetime>
        </group>
        <group class="allprojectP">
          <datetime
            v-model="endTime"
            @on-change="change"
            :title="endLabel"
            @on-cancel="log('cancel')"
            @on-confirm="onConfirm"
            @on-hide="log('hide', $event)"></datetime>
        </group>
        <group title="项目描述" style="background: #fff;">
          <span style="padding: 20px;">
            Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，
            让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、
            原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理
          </span>
        </group>
        <group class="allprojectP">
          <x-input title="项目进度"  placeholder="请输入项目类别" v-model="pjd"></x-input>
        </group>
        <group title="项目成员及任务表" class="allprojectP">
          <x-table :cell-bordered="false" :content-bordered="false" class="xtable">
            <thead>
            <tr style="background-color: #f2f2f2;color: #999;">
              <th>任务</th>
              <th>项目成员</th>
              <th>任务进度</th>
              <th>任务截止日期</th>
            </tr>
            </thead>
            <tbody>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
              <tr>
                <td>任务1</td>
                <td>成员1</td>
                <td>0%</td>
                <td>2018-12-18</td>
              </tr>
            </tbody>
          </x-table>
        </group>
      </div>
    </div>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import { XTable } from 'vux'
  import { XInput,Datetime,Group} from 'vux'
  import { Scroller } from 'vux'
  export default {
    data(){
      return {
        startLabel : "开始时间",
        startTime : "2018-12-18",
        endLabel : "截止时间",
        endTime : "2018-12-18",
        pStart : "",
        pEnd : "",
        pFzr: "负责人1",
        pLb: "类别",
        pName : "实验室管理项目",
        pjd:"0%"
      }
    },
    components:{
      XHeader,
      XTable,
      Scroller,
      XInput,
      Group,
      Datetime
    },
    methods:{
      log (str1, str2 = '') {
        console.log(str1, str2)
      },
      onConfirm (val) {
        console.log('on-confirm arg', val)
        console.log('current value', this.startTime)
      },
      change (value) {
        console.log('change', value)
      },
    }
  }
</script>

<style>
</style>
